doctype
html
    head
        meta(charset="utf-8")
        title 闪闪的微客
        meta(name="viewport", content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no")
        style.
            *{
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }

            body{
                font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
            }

            .clearfix:before{
                content:"";
                clear: both;
            }
            .clearfix:after{
                content:"";
                display: table;
            }
            .topics{
                font-size: 20px;
            }
            .topic{
                display: block;
                padding: 15px 15px 10px 10px;
                overflow: hidden;
                position: relative;
                text-decoration: none;
                -webkit-tap-highlight-color: transparent;
            }
            .topic:after{
                content: " ";
                position: absolute;
                bottom: 0;
                width: 100%;
                height: 1px;
                border-bottom: 1px solid #e2e2e2;
                -webkit-transform-origin: 0 100%;
                transform-origin: 0 100%;
                -webkit-transform: scaleY(0.5);
                transform: scaleY(0.5);
                left: 10px;
            }
            .topic .cover{
                float: left;
                display: block;
                vertical-align: top;
            }
            .topic img {
                width: 80px;
                height: 60px;
            }
            .topic .content{
                overflow: hidden;
                padding: 0 0 0 10px;
            }
            .topic .title{
                font-weight: 400;
                font-size: 16px;
                color: #000;
                width: 100%;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                word-wrap: normal;
                line-height: 1.4;
            }
            .topic .abstract{
                font-size: 13px;
                color: #999;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                line-height: 1.3;
            }
body
    .contaniner
        .topics
            .topics
                for t in list
                    a.topic.clearfix(href=t.link)
                        .cover
                            img(src="http://data.wpax.cn/r/#{t.cover.path}")
                        .content
                            .title=t.title
                            .abstract=t.abstract